<style scoped lang="less">
	.el-input {
		width: 205px;
		margin-right: 10px;
		border: none;
	}

	.searchBtn {
		background-color: #106ab1;
		border: none;
	}

	.addBtn {
		background-color: #6BAC38;
		border: none;
		float: right;
		margin-right: 20px;
	}

	/* 表格距顶部的距离 */
	.el-table {
		margin-top: 20px;
	}

	.el-table {
		--el-table-border-color: none;
		--el-table-borde: none;
		--el-table-bg-color: none !important;
		--el-table-header-bg-color: #f3f8fd;
		--el-table-header-text-color: #333 !important
	}

	/* 表格间隙 */
	:deep(.el-table__body) {
		-webkit-border-vertical-spacing: 9px;
	}
	.el-pagination{
	        --el-pagination-bg-color:none;
	        --el-pagination-button-disabled-bg-color:none;
	        justify-content: center;
	    }
		.nopass{
			color:#FF1313;
		}
		.pass{
			color:#6DAC3B;
		}
		.noexam{
			color:#999999;
		}
</style>

<template>
	<div class="header">
		<el-input v-model="applyName" placeholder="请输入申请人姓名" />
		<el-input v-model="aimName" placeholder="请输入指向老师" />
		<el-input v-model="applyClass" placeholder="请输入申请课程" />
		<el-input v-model="exName" placeholder="请输入审批人" />
		<el-button class="searchBtn" type="info" :icon="Search" @click="searchFn">搜索</el-button>
		<el-button class="addBtn" type="primary" @click="goApply">申请</el-button>
	</div>
	<div class="tabBox">
		<el-table :data="tableData" style="width: 100%">
			<el-table-column  prop="oldTeaName" label="申请老师" width="180" >
				<template  #default="{row}">
					<span v-if="row.oldTeaName">{{row.oldTeaName}}</span>
					<span v-else>暂无</span>
				</template>
			</el-table-column>
			<el-table-column prop="newTeaName" label="指向老师" width="180" >
				<template  #default="{row}">
					<span v-if="row.newTeaName">{{row.newTeaName}}</span>
					<span v-else>暂无</span>
				</template>
				</el-table-column >
			<el-table-column prop="newSubName" label="申请课程" >
				<template  #default="{row}">
					<span v-if="row.oldSubName">{{row.oldSubName}}</span>
					<span v-else>暂无</span>
				</template>
			</el-table-column>
			<el-table-column prop="newClazzName" label="申请所换班级" >
				<template  #default="{row}">
					<span v-if="row.newClazzName">{{row.newClazzName}}</span>
					<span v-else>暂无</span>
				</template>
			</el-table-column>
			<el-table-column prop="time" label="换课时间">
				<template  #default="{row}">
					<span v-if="row.newTime">{{row.newTime}}</span>
					<span v-else>暂无</span>
				</template>
			</el-table-column>
			<el-table-column >
				<template #header>
					<el-select v-model="value" placeholder="审批状态" size='small' style="width: 150px;margin-right: 10px;"> 
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"@click="se(item.value)" />
					</el-select>
				</template>
				<template prop="sname" #default="{row}">
					<span v-if="row.sname=='未审批'" :class="{noexam : row.sname=='未审批'}">{{row.sname}}</span>
					<span v-if="row.sname=='未通过'" :class="{nopass : row.sname=='未通过'}">{{row.sname}}</span>
					<span v-if="row.sname=='通过'" :class="{pass : row.sname=='通过'}">{{row.sname}}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template #default="{row}">
					<span style="color:#2476B6" @click="goDetail(row)">详情</span>
					<span style="margin-left: 10%; color:red;" @click="delfn(row)">删除</span>
				</template>
				
			</el-table-column>
		</el-table>
	</div>
	<!-- <el-pagination layout="prev, pager, next" :total="50" /> -->
	 <el-pagination layout="prev, pager, next" :total="pageCount" class="page" v-model:current-page="pageindex" @change="num"/>
 <!-- <el-pagination layout="prev, pager, next" :total="pageCount" class="page" v-model:current-page="pageindex" @change ="changePage"/> -->
<el-dialog
    v-model="dialogVisible"
    title="删除"
    width="500"
 
  >
    <span style=" display: block; width: 100%; text-align: center; font-size: 18px;">确定要删除吗？</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary"  @click="confrimDel">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
	import {
		Search,
		CirclePlus
	} from '@element-plus/icons-vue'
	import {
		ref
	} from 'vue'
	import {
		approlist, deletFn, statusList
	} from '@/api/gh';
import { useRoute,useRouter } from 'vue-router';
	let route=useRoute;
	let router = useRouter()
	let pageindex = ref(1)
	let pagesize = ref(20)
	let pageCount = ref(1)
	//s搜索表单
	let applyName = ref("")
	let aimName = ref("")
	let applyClass = ref("")
	let exName = ref("")
	let dialogVisible = ref(false)
	//搜索
	const searchFn =async ()=>{
		let data = {
			oldTeaName:applyName.value,//申请人
			newTeaName:aimName.value,//目标人
			oldSubName:applyClass.value,//课程
			userName:exName.value,//审核人
			pageindex:pageindex.value,
			pagesize:pagesize.value
		}
		let searchObj={
			
		}
		for(let key in data){
			// console.log(key,data[key])
			if(data[key]){
				searchObj[key]=data[key]
			}
		}
		let res =await statusList(searchObj)
		
		tableData.value = res.list
			
		pageCount.value = res.total
		applyName.value=""//申请人
		aimName.value=""//目标人
		applyClass.value=""//课程
		exName.value=""//审核人
	
	}
	//表格
	let tableData = ref([])
	//下拉菜单
	const value = ref('')

	const options = [{
			value: '1',
			label: '审批通过',
		},
		{
			value: '2',
			label: '审批未通过',
		},
		{
			value: '0',
			label: '未审批',
		},

	]
	//获取换课列表
	
	const getApprolist = async () => {
		let res = await approlist({
			
			pageindex: pageindex.value,
			pagesize: pagesize.value
		})
		// Object.assign(tableData.value,res.list)
		tableData.value = res.list
		pageCount.value = res.num
	}
	getApprolist()
	//换页
	const changePage=()=>{
		// console.log(pageindex.value)
		 getApprolist()
	}
	//选择审批状态
	const se =async(sta)=>{
		// console.log(status)
		let res =await statusList({
			pageindex:pageindex.value,
			pagesize:pagesize.value,
			status:Number(sta)
		})
		// console.log(res)
		tableData.value = res.list
	
		pageCount.value = res.total
	}
	//跳转至申请
	const goApply=()=>{
		router.push({
			name: "hideApply",
			path: "/hideApply",
		})
	}
	//跳转到详情
	const goDetail=(params)=>{
		// console.log(params.chaId)
		router.push({
			name:"hideApplyDetail",
			path:"/hideApplyDetail",
			query:{"chaId":params.chaId},
		})
	}
	//删除 
	let targetId = ref("")
	const delfn=(params)=>{
		// console.log(params.chaId)
		targetId.value=params.chaId
		dialogVisible.value = true
	}
	let confrimDel = async()=>{
		let res = await deletFn({
			chaId:targetId.value
		})
		dialogVisible.value = false
		getApprolist()
	}
</script>